Vite与Webpack的区别

一句话概括：
Webpack 是“先打包再启动”的传统打包器，而 Vite 利用浏览器原生 ES 模块，实现了“先启动再按需编译”的开发模式。

1. 核心原理

  • Webpack
    基于 Bundle（打包） 模式。启动时必须递归解析所有模块依赖图，把所有资源打包成一个或多个 bundle，浏览器才能加载。这在大型项目中会导致启动耗时很长。

  • Vite
    开发时是 No-Bundle（不打包） 模式。利用现代浏览器对 ES 模块的原生支持，服务器只负责在浏览器请求某个模块时，实时编译并返回该模块。它通过 esbuild 对依赖进行预构建，将 CommonJS 等格式转为 ESM，并以源码的 ESM 导入方式直接提供服务。

2. 冷启动速度

对比项WebpackVite
冷启动随着项目规模增长，打包时间线性甚至指数级增加。几乎秒启，不需要打包，启动速度与项目大小无关。
技术原因必须构建完整的模块依赖图，并完成整个打包过程。利用原生 ESM，按需编译，仅转换浏览器请求的文件。

3. 热更新（HMR）

  • Webpack
    文件变动后需要重新构建相关模块链，项目变大时 HMR 反应会明显变慢。
  • Vite
    HMR 基于 ESM，仅让浏览器重新请求并更新变动的模块，不需要重建整个模块图。这使得 HMR 速度极快且始终保持常量级，几乎无感知。

4. 生产构建

  • Webpack
    开发和构建都用同一个打包引擎，插件和 loader 生态非常成熟。
  • Vite
    开发用原生 ESM + esbuild，生产打包则交给 Rollup。Rollup 更擅长生成精简、高效的静态资源，对 tree-shaking 更友好。这确保了开发体验与最终产物质量的双优。

5. 预构建与底层工具

  • Webpack
    全部由 JavaScript 编写的编译器处理，虽然持久化缓存等优化已加入，但速度天花板仍低于编译型语言。
  • Vite
    将依赖预构建交给 esbuild（用 Go 编写），速度快出几个数量级；将源码编译和打包交给 Rollup。这种“组合拳”让它极大缩短了开发和构建周期。

6. 配置与开箱即用

  • Webpack
    配置相对复杂，需要手动指定入口、loader、plugin 等。虽然有 webpack-dev-server，但常用功能（如 TypeScript、CSS 预处理器）都需要显式配置。
  • Vite
    追求“开箱即用”，对 .ts、.jsx、.vue、.scss 等文件有天然支持，无需额外安装插件。vite.config.js 通常非常简洁。

7. 生态与兼容性

  • Webpack
    生态极其庞大，几乎能找到任何需要的 loader 和 plugin。内部模块联邦等功能在微前端等领域有独特价值。对老旧浏览器（IE11）的支持是它被大量老项目依赖的原因。
  • Vite
    兼容 Rollup 插件，自有插件体系也在迅速丰富，但总规模仍不及 Webpack。开发环境要求浏览器支持原生 ESM（现代浏览器均支持），生产构建则需要通过官方 @vitejs/plugin-legacy 来兼容旧版浏览器。

8. 适用场景

工具适合场景
Vite新项目首选，追求极速开发体验，面向现代浏览器，框架支持好（Vue、React、Svelte 等官方推荐）。
Webpack老项目稳定维护，需要支持 IE 等旧浏览器，或深度依赖 Webpack 特有 loader、插件以及模块联邦的项目。

总结建议

如果你开始一个新项目，没有历史包袱，直接选 Vite 会得到更丝滑的开发体验。如果你正在维护一个庞大且深度定制的 Webpack 项目，完全迁移的收益需要权衡，但可以逐步尝试用 Vite 做部分新特性开发。